<!-- 
    自定义指令的使用步骤
        1．定义一个自定义指令
        2.注册
        3.使用
    定义一个自定义指令
        1．定义一个包含有特殊选项的对象（特殊选项与Vue的生命周期钩子函数类似）
        2.定义一个函数（该对象写法的简写)


    注册
        1．全局注册
        app.directive(name,定义的指令)
        2.局部注册
        配置组件的directives选项，
        directives: {
            name: 定义的指令
        }
    使用
        通过v-xxx 用在元素上即可
    -->
<template>
    <div>
        <!-- v-bind:title.a.b="msg" -->
        <h2 v-copy:title.a="msg">自定义指令</h2>
        <!-- 
            Teleport是传送门的组件，是Vue3新增的内置组件。
             通过设置内容传送到to的位置去。可以将插槽内tO属性。
          -->
        <!-- <Teleport to="body">
            <div class="box2" v-draggable></div>
        </Teleport> -->
        <div class="box" v-waterMarker="'版权所有'"></div>

        <hr>
        <div class="box" v-waterMarker="'张三'"></div>

        <!-- <button @click="count++">{{ count }}</button>
        <button @click="msg = '李四'">{{ msg }}</button> -->
        <!-- 使用 focus 指令 -->
        <input v-focus type="text">
        <hr>
        <Hello />
    </div>
</template>

<script>
//引入focus指令
import focus from '@/directives/modules/focus'
//引入hello组件
import Hello from './components/hello.vue'


export default {
    components: {
        Hello,
    },
    //局部注册指令
    directives: {
        focus: focus,
    },
    data() {
        return {
            count: 1,
            msg: '张三',
        }
    }
}
</script>

<style lang="scss" scoped>
.box {
    width: 500px;
    height: 500px;
    background-color: pink;
}

.box2 {
    width: 200px;
    height: 200px;
    background-color: rgb(255, 0, 43);
}
</style>